<template>
    <div class="app-container">
        <el-card shadow="never" v-loading="loading">
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane v-for="item in roleList" :key="item.uid" :label="item.roleName"
                    :name="item.roleName"></el-tab-pane>
            </el-tabs>
            <el-row :gutter="5">
                <el-col :span="24" class="main-card-view">
                    <el-row>
                        <el-card shadow="never" class="top-search-view-card">
                            <el-row>
                                <el-form :inline="true" :model="searchForm" class="demo-form-inline search-view">
                                    <el-form-item label="区域">
                                        <el-input v-model="searchForm.region" placeholder="请输入区域"></el-input>
                                    </el-form-item>
                                    <el-form-item label="用户名">
                                        <el-input v-model="searchForm.userName" placeholder="请输入用户名"></el-input>
                                    </el-form-item>
                                    <el-form-item>
                                        <el-button type="primary" @click="handleSearch" class="search-button">查询</el-button>
                                        <el-button type="primary" @click="showCreateDialog"
                                            class="new-button">添加</el-button>
                                    </el-form-item>
                                </el-form>
                            </el-row>
                        </el-card>
                    </el-row>

                    <el-row>
                        <el-card shadow="never">
                            <el-table :data="tableData" :stripe="true" style="width: 100%">
                                <el-table-column prop="userName" align="center" label="用户名" />
                                <el-table-column prop="logName" align="center" label="登录账户" />
                                <el-table-column prop="roleName" align="center" label="角色" />
                                <el-table-column prop="telephone" align="center" label="联系电话" />
                                <el-table-column prop="contactAddress" align="center" label="联系地址" />
                                <el-table-column prop="createTime" align="center" label="添加时间" />
                                <el-table-column align="center" label="操作" width="200">
                                    <template slot-scope="scope">
                                        <!--                                        <el-button type="text" class="table-details-btn"-->
                                        <!--                                                   @click="handleDetails(scope.$index, scope.row)"></el-button>&lt;!&ndash;详情&ndash;&gt;-->
                                        <el-button type="text" class="table-edit-btn"
                                            @click="showEditDialog(scope.$index, scope.row)"></el-button><!--编辑-->
                                        <el-button type="text" class="table-delete-btn"
                                            @click="handleDelete(scope.$index, scope.row)"></el-button><!--删除-->
                                    </template>
                                </el-table-column>
                            </el-table>
                            <XPagination ref="pageInfo" :total="total" :get-data="getList" />
                        </el-card>
                    </el-row>
                </el-col>
            </el-row>
        </el-card>

        <el-dialog width="500px" :title="dialogTitle" :visible.sync="dialogVisible">
            <el-form label-width="80px" ref="form" :model="form" :rules="formRules">
                <el-tabs>
                    <el-tab-pane label="用户信息" />
                </el-tabs>
                <el-form-item label="用户名" prop="userName">
                    <el-input v-model="form.userName" />
                </el-form-item>
                <el-form-item label="联系电话" prop="telephone">
                    <el-input v-model="form.telephone" />
                </el-form-item>
                <el-form-item label="联系地址" prop="contactAddress">
                    <el-input v-model="form.contactAddress" />
                </el-form-item>
                <el-form-item label="备注" prop="notes">
                    <el-input v-model="form.notes" />
                </el-form-item>
                <el-form-item label="角色" prop="roleUid">
                    <el-select style="width: 100%;" v-model="form.roleUid">
                        <el-option v-for="(item) in roleList" :key="item.uid" :label="item.roleName" :value="item.uid" />
                    </el-select>
                </el-form-item>
                <!-- <el-form-item label="区域" prop="region" v-if="activeName === '机构管理员' ||
                    activeName === '专家管理员'">
                    <el-cascader ref="cascader" v-model="form.region" :options="regionList" :props="defaultProps"
                        @change="closeTanc"></el-cascader>
                </el-form-item> -->
                <el-tabs>
                    <el-tab-pane label="账户信息" />
                </el-tabs>
                <el-form-item label="登录账号" prop="logName">
                    <el-input v-model="form.logName" />
                </el-form-item>
                <el-form-item label="登录密码" prop="pwd">
                    <el-input type="password" v-model="form.pwd" />
                </el-form-item>
            </el-form>
            <template slot="footer">
                <el-button type="primary" @click="handleSave">保存</el-button>
            </template>
        </el-dialog>




    </div>
</template>

<script>
import { Base64 } from 'js-base64'
import XPagination from "../../components/xpagination/XPagination";
import * as userInfo from "../../api/userInfo"
import * as formUtils from "../../utils/formUtils"
import * as sysRole from "../../api/sysRole";
import regionList from '../../assets/map.json'
export default {
    name: "list",
    components: { XPagination },
    data () {
        return {
            searchForm: {
                userName: "",
                region: ""
            },
            tableData: [],
            loading: false,
            dialogVisible: false,
            total: 0,
            dialogTitle: "新增账户",
            form: {
                uid: "",
                userName: "",
                telephone: "",
                contactAddress: "",
                notes: "",
                roleUid: "",
                roleName: "",
                region: "",
                logName: "",
                pwd: "",
            },
            editStatus: "add",
            formRules: {
                userName: [
                    { required: true, message: '不能为空', trigger: 'blur' },
                ],
                telephone: [
                    { required: true, message: '不能为空', trigger: 'blur' },
                ],
                contactAddress: [
                    { required: true, message: '不能为空', trigger: 'blur' },
                ],
                notes: [
                    { required: true, message: '不能为空', trigger: 'blur' },
                ],
                roleUid: [
                    { required: true, message: '不能为空', trigger: 'blur' },
                ],
                region: [
                    { required: true, message: '不能为空', trigger: 'blur' },
                ],
                logName: [
                    { required: true, message: '不能为空', trigger: 'blur' },
                ],
                pwd: [
                    { required: true, message: '不能为空', trigger: 'blur' },
                    {
                            type: 'string',
                            message: '请输入不包含空格的字符',
                            trigger: 'blur',
                            transform(value) {
                              if (value && value.indexOf(' ') === -1) {
                                return value
                              } else {
                                return false
                              }
                            }
                          },
                          {
                            trigger: 'blur',
                            message: '密码必须由数字、字母、特殊字符组合,请输入6-16位',
                            validator: (rule, value, callback) => {
                              var passwordreg = /(?=.*\d)(?=.*[a-zA-Z])(?=.*[^a-zA-Z0-9]).{6,16}/
                              if (!passwordreg.test(value)) {
                                callback(new Error('密码必须由数字、字母、特殊字符组合,请输入6-16位'))
                              }else{
                                callback()
                              }
                            } }
                ],
            },
            roleList: [],
            regionList: regionList,
            defaultProps: {
                expandTrigger: 'hover',
                emitPath: false,
                label: 'name',
                value: 'name',
                children: 'districts',
                checkStrictly: true
            },
            activeName: '管理员'
        }
    },
    methods: {
        getList (pageInfo) {
            const param = {
                ...this.searchForm,
                ...pageInfo,
                roleName: this.activeName
            }
            userInfo.queryByPage(param).then(response => {
                console.log(response)
                this.tableData = response.data.data.rows
                this.total = response.data.data.total
                this.loading = false
            }).catch(error => {
                console.log(error)
            })
        },
        handleDelete (index, data) {
            this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                const param = {
                    uid: data.uid,
                }
                this.loading = true
                userInfo.deleteById(param).then(result => {
                    this.loading = false
                    this.$message.success(result.data.msg)
                    this.handleSearch()
                }).catch(error => {
                    this.loading = false
                    console.log(error)
                })
            }).catch(() => {
                console.log('取消删除')
            });
        },
        handleSearch () {
            this.$refs.pageInfo.loadData()
        },
        showCreateDialog () {
            this.dialogVisible = true;
            this.$nextTick(() => {
                this.dialogTitle = "新增账户"
                this.editStatus = "add"
                this.$refs.form.resetFields()
                this.form = Object.assign({}, this.$options.data().form)
                let item = this.roleList.filter((item) => {
                    return item.roleName == this.activeName
                })
                this.form.roleUid = item[0].uid
                this.form.roleName = item[0].roleName
            })

        },
        handleSave () {
            //this.form.pwd
            if (this.editStatus === "add") {
                this.handleAdd()
            } else {
                this.handleEdit()
            }
        },
        handleAdd () {
            this.$refs["form"].validate((valid) => {
                if (!valid) {
                    return false
                }
                this.setForm()
                const param = Object.assign({}, this.form)
                param.pwd = Base64.encode(param.pwd)
                formUtils.filterFormFields(param)
                userInfo.insert(param).then(result => {
                    this.$message.success(result.data.msg)
                    this.dialogVisible = false
                    this.handleSearch()
                }).catch(error => {
                    this.$message.error(error)
                    console.log(error)
                })

            })
        },
        handleEdit () {
            this.$refs["form"].validate((valid) => {
                if (!valid) {
                    return false
                }
                this.setForm()
                const param = Object.assign({}, this.form)
                param.pwd = Base64.encode(param.pwd)
                formUtils.filterFormFields(param)
                userInfo.update(param).then(result => {
                    this.$message.success(result.data.msg)
                    this.dialogVisible = false
                    this.handleSearch()
                }).catch(error => {
                    this.$message.error(error)
                    console.log(error)
                })
            })
        },
        showEditDialog (index, data) {
            this.dialogVisible = true
            this.$nextTick(() => {
                this.$refs.form.resetFields()
                this.form = Object.assign({}, data)
                this.form.pwd = Base64.atob(this.form.pwd)
                this.dialogTitle = "编辑账户"
                this.editStatus = "edit"
            })
        },
        getRoleList () {
            const param = {}
            // sysRole.queryByPage(param).then(response => {
            //     console.log(response)
            //     this.roleList = response.data.data.rows
            // }).catch(error => {
            //     console.log(error)
            // })
        },
        setForm () {
            const roleUid = this.form.roleUid
            const role = this.roleList.find(e => e.uid === roleUid)
            if (role) {
                this.form.roleName = role.roleName
            }
        },
        handleClick () {
            this.handleSearch()
        },
        closeTanc (e) {
            this.$refs.cascader.dropDownVisible = false
        }
    },
    mounted () {
        this.getRoleList()
        this.handleSearch()
    }
}
</script>

<style scoped lang="scss"></style>
